<template>
	<view>
		<myLogin :imgSrc="playSrc"></myLogin>   <!-- first -->
		<view class="tx">
			<image src="../../static/mine/6.png" style="width: 4rem;height: 4rem;border-radius: 50%;padding: 41px;"></image>
			<view class="h1" style="font-weight: 600;font-size: 18px;position: relative;top: 30px;left: 5px;">HI，「库」朋友
			<view class="h2" style="font-size: 14.5px;font-weight: 100;color: #afaeaf;">好咖啡源自好原料</view></view>
			<view class="h3" style="font-size: 12px;position: relative;top: 110px;left: 12px;font-weight: 600;">立即登录></view>
		</view>
		<view class="video"><video loop muted autoplay src="../../static/mine/8.mp4"></video></view>
		<button @click="open" style="color: #fff;">立即登录</button>
		<button @click="open" style="margin-top: 7px;color: #a52337;background-color: #fff;border: 1px solid #a52337;">登陆其他账号</button>
		<view class="text1">暂不登录</view>
		<view class="text2">我已阅读并同意<view class="text2-a">《用户协议》</view>与<view class="text2-a">《隐私条款》</view></view>
		
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup">
					<view class="tank">立即登录，享受会员权益</view>
					<view class="flex-colomn">
						<view class="tet">登录成功</view>
					</view>
		</uni-popup>
	</view>	
</template>

<script>
	import myLogin from '../../components/myLogin/myLogin.vue'     //second
	export default {
		data() {
			return {
				playSrc:"../../static/mine/1.png"          //third
			}
		},
		components:{
			myLogin											//finally
		},
		methods: {
			open(){		
			    this.$refs.popup.open('bottom')
			    }
		}
	}
</script>

<style>
button{
	width: 17rem;
	height: 2.9rem;
	border-radius: 30px;
	font-size: 14px;
	line-height: 46px;
	position: relative;
	top: 9rem;
	left: 0rem;
	background-color: #a52337;
}
video{
	width: 21rem;
    height: 11.8rem;
	 overflow: hidden;
	position: relative;
	bottom: -1rem;
    left: 1.2rem;
}
.tank{
    color: #fff;
    background-color: #000;
    width: 23.45rem;
    height: 2rem;
    font-size: 13px;
    padding: 10px 0 0 27px;
    line-height: 28px;
    border-radius: 10px 10px 0px 0px;
}
.tx{
	width: 21.6rem;
    height: 8.8rem;
    display: flex;
    background-color: #ffffff;
    margin-left: 15px;
    margin-top: 10px;
    border-radius: 8px;
	}
.text1{
    color: #b95867;
    font-size: 15px;
    position: relative;
    bottom: -9.5rem;
    left: 9.9rem;
}
.text2{
    display: flex;
    font-size: 13px;
    position: relative;
    bottom: -12rem;
    left: 4.6rem;
}
.text2-a{
		color: #bb5c6b;
	}
.img1{
    width: 16rem;
    height: 3.5rem;
    position: relative;
    top: 3.7rem;
    left: 6.9rem;
}
.bj-show{
		width: 100%;
	}
.login-bto{
	background-color: #4cffeb;
	width: 120px;
	height: 50px;
	position: absolute;
	bottom: 30px;
	left: calc(50% - 60px);
}
.tet {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 45vh;
	font-size: 25px;
	margin-top: 20rpx;
}
.close-btn {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    cursor: pointer;
	}
</style>
